<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>病虫害诊断系统</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="pest_btn">
	<ul class="corn_ul clearfix">
    	<li>
        	<span class="corn_span">玉米<em></em></span>
            <div class="corn_div">
            	<a href="javascript:;">水稻</a>
                <a href="javascript:;">烟草</a>
            </div>
        </li>
        <li>
        	<span class="corn_span">虫害<em></em></span>
            <div class="corn_div">
            	<a href="javascript:;">病害</a>
                
            </div>
        </li>
    </ul>
</div>

<div class="pest">
	<ul class="pest_ul clearfix">
    	<li><a href="#"><img src="images/pest1.jpg"></a></li>
        <li><a href="#"><img src="images/pest1.jpg"></a></li>
        <li><a href="#"><img src="images/pest1.jpg"></a></li>
        <li><a href="#"><img src="images/pest1.jpg"></a></li>
        <li><a href="#"><img src="images/pest1.jpg"></a></li>
        <li><a href="#"><img src="images/pest1.jpg"></a></li>
        <li><a href="#"><img src="images/pest1.jpg"></a></li>
        <li><a href="#"><img src="images/pest1.jpg"></a></li>
        <li><a href="#"><img src="images/pest1.jpg"></a></li>
    </ul>
</div>

</body>

<script src="js/jquery-1.12.4.min.js"></script>
<script>
$('.corn_ul li').last().addClass('on')

$(function(){
	$('.corn_ul li').click(function(){
		var index=$('.corn_ul li').index(this);
		$('.corn_div').slideUp()
		if($(".corn_div").eq(index).is(":hidden"))
		{
			$('.corn_div').eq(index).slideDown()
			$('.corn_ul span').eq(index).addClass('on').siblings().removeClass('on');
		}else{
			$('.corn_div').eq(index).slideUp()
			$('.corn_ul span').eq(index).removeClass('on')
		}

	})
	
	$('.corn_div a').click(function(){
		var index=$(this).html()
		var indexhtml=$(this).parents('.corn_ul li').find('.corn_span').text()
		$(this).parents('.corn_ul li').find('.corn_span').html(index)
		$(this).html(indexhtml)
	})
	
	
})
</script>
</html>
